<template>
	<view class="container" style="background-image: url('/static/background/cate-back.jpg');">
		<view class="header">
			<view class="header-title">
				{{name}}
			</view>
		</view>
		
		<view class="img">
			<image class="cateImgage" :src="img" mode="widthFix"></image>
		</view>
		
		<view class="tittle">
				<text class="content-title">{{name}}介绍</text>
		</view>
		
		<view class="info">
			<view class="content" style="white-space: pre-wrap;">
				<text class="section-title">简介：</text>
				<text class="section-content" style="white-space: pre-wrap;">{{define}}</text>
			</view>
			<view class="content" style="white-space: pre-wrap;">
				<text class="section-title">特点：</text>
				<text class="section-content" style="white-space: pre-wrap;">{{feature}}</text>
			</view>
			<view class="content" style="white-space: pre-wrap;">
				<text class="section-title">寓意：</text>
				<text class="section-content" style="white-space: pre-wrap;">{{implication}}</text>
			</view>
			<view class="content" style="white-space: pre-wrap;">
				<text class="section-title">适用：</text>
				<text class="section-content" style="white-space: pre-wrap;">{{use}}</text>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				desc:'',
				img:'',
				define:'',
				feature:'',
				implication:'',
				use:'',
				stylesList:[]
			}
		},
		methods: {
			async getStyleList() {
			
			  try {
				  console.log('当前 baseURL：',uni.$http.baseUrl);
			    const res = await uni.$http.get('/cate/list/4');
				console.log('完整响应LIST数据:', res); 
			    
			    this.stylesList = res.data; 
			    console.log('成功获取LIST数据：', this.stylesList);
			  } catch (err) {
			    console.error('LIST请求失败：', err);
			  }
			},
			
			select(name1){
				for (const style of this.stylesList) {
				      if (style.name === name1) {
						console.log(style.name);
				        this.name=style.name
						this.define=style.define
						this.feature=style.feature
						this.img=style.img
						this.implication=style.implication
						this.use=style.use
				        
				      }
				    }
			}
		},
		onLoad(options) {
			this.getStyleList().then(() => { 
			    this.select(options.name); 
			  });
			
			uni.setNavigationBarTitle({
			 		title:this.name
			 })
		},
	}
</script>

<style>

.container {
	max-width: 800px;
	margin: 0 auto;
	border-radius: 8px;
	padding: 30px;
	border: 1px solid #d9c7a6;
	position: relative;
}

.header {
	text-align: center;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 2px solid #d9c7a6;
	position: relative;
}
        
.header-title {
	font-family: 'Ma Shan Zheng', cursive;
	font-size: 2.5rem;
	color: #8c2f1b;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
	letter-spacing: 5px;
}

.img {
	text-align: center;
	margin: 10px 0;
	padding: 10px;
}
        
.cateImgage {
	max-width: 80%;
	height: auto;
	border: 3px solid #83725f;
	border-radius: 4px;
}
        
.tittle {
	margin: 20px 0 15px;
}
        
.content-title {
	font-size: 1.8rem;
	color: #7e8174;
	padding: 5px 20px;
	border-top: 2px solid #d9d5ca;
	border-left: 3px solid #d9d5ca;
	letter-spacing: 3px;
}

.info {
	margin-top: 20px;
}

.content {
	margin-bottom: 25px;
	padding: 15px 20px;
	border-radius: 4px;
	border-left: 3px solid #c2a977;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
        
.section-title {
	display: block;
	font-weight: bold;
	font-size: 1.5rem;
	color: #8c2f1b;
	margin-bottom: 8px;
	padding-left: 10px;
	border-left: 4px solid #8c2f1b;
}
        
.section-content {
	display: block;
	font-size: 1rem;
	text-indent: 2em;
	margin-top: 8px;
	padding: 0 10px;
}
        

@media (max-width: 600px) {
	.container {
			padding: 20px 15px;
	}
            
	.header-title {
		font-size: 2rem;
    }
            
	.content-title {
        font-size: 1.5rem;
	}
}
        
</style>